<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的预约信息</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            margin: 20px;
            color: #333;
        }
        h1 {
            text-align: center;
            color: #4CAF50;
        }
        .booking {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
            display: flex;
            transition: transform 0.3s;
        }
        /*.booking:hover {*/
        /*    transform: translateY(-5px);*/
        /*}*/
        .booking img {
            /*max-width: 150px;*/
            /*height: auto;*/
            margin-left: 15px;
            margin-top: 30px;
            border-radius: 10px;
            border-right: 1px solid #ccc;
        }
        .booking-details {
            padding: 15px;
            flex: 1;
            margin-left: 50px;
            position: relative;
        }
        .booking-details h2 {
            margin-top: 0;
            color: #4CAF50;
        }
        .booking-details p {
            margin: 5px 0;
        }
        .cancel-button {
            background-color: #f44336;
            color: white;
            padding: 10px 15px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
            position: absolute;
            left:1300px;
            margin-top: 150px;
        }
        .cancel-button:hover {
            background-color: #d32f2f;
        }
    </style>
</head>
<body>
<h1>我的预约信息</h1>
<div id="bookingsContainer"></div>

<script>
    const token = localStorage.getItem('token');

    document.addEventListener("DOMContentLoaded", function() {
        const userId = localStorage.getItem('userId');
        if (!userId) {
            alert('用户未登录');
            return;
        }

        fetch(`http://localhost:8080/user/getBookingsByUserId?userId=${userId}`, {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    displayBookings(data.data);
                } else {
                    alert('获取预约信息失败');
                }
            })
            .catch(error => console.error('Error fetching bookings:', error));
    });

    function displayBookings(bookings) {
        const container = document.getElementById('bookingsContainer');
        container.innerHTML = '';

        bookings.forEach(booking => {
            const bookingElement = document.createElement('div');
            bookingElement.className = 'booking';

            bookingElement.innerHTML = `
                <img style="width: 500px;height:300px" src="${booking.imageUrl}" alt="${booking.title}">
                <div style="display: flex">
                                <div class="booking-details">
                    <h2>${booking.title}</h2>
                    <p>描述: ${booking.description}</p>
                    <p>预约时间: ${new Date(booking.bookingTime).toLocaleString()}</p>
                    <p>备注: ${booking.remarkInfo}</p>
                    <p>房东: ${booking.username}</p>
                    <p>联系电话: ${booking.phoneNumber}</p>
                    <p>地址: ${booking.province} ${booking.city} ${booking.community}</p>
                    <p>房屋类型: ${booking.houseType}</p>
                    <p>面积: ${booking.area} 平方米</p>
                    <p>价格: ¥${booking.price.toLocaleString()}</p>
                    <p>类型: ${booking.type === 0 ? '二手房' : '新房'}</p>

                </div>
                <div>
                 <button class="cancel-button" onclick="cancelBooking(${booking.bookingId})">取消预约</button>
</div>
</div>

            `;

            container.appendChild(bookingElement);
        });
    }

    function cancelBooking(bookingId) {
        if (confirm('确定要取消这个预约吗？')) {
            fetch(`http://localhost:8080/user/deleteBooking?bookingId=${bookingId}`, {
                method: 'DELETE',
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 1) {
                        alert('预约取消成功');
                        location.reload();
                    } else {
                        alert('取消预约失败：' + data.msg);
                    }
                })
                .catch(error => {
                    console.error('Error deleting booking:', error);
                    alert('取消预约失败，请稍后再试');
                });
        }
    }

</script>
</body>
</html>
